import { overallOrganizationTree } from '@/services/api/api-analysis';
import { FolderOutlined, TagOutlined } from '@ant-design/icons';
import ProCard from '@ant-design/pro-card';
import { DatePicker, Empty } from 'antd';
import Tree, { DataNode } from 'antd/es/tree';
import { useEffect, useState } from 'react';

interface OrganizationCardProps {
  onSelectOrganization: (organization: any) => void
}

const OrganizationCard: React.FC<OrganizationCardProps> = (props) => {
  const { onSelectOrganization } = props

  const [selectOrganizationName, setSelectOrganizationNameState] = useState<string>();

  /**
   * 初始化树形数据
   */
  const [dataTree, setDataTreeState] = useState<DataNode[]>();

  /**
   * 预备Tree结构数据
   * @param data
   */
  function readyTreeData(data: AdminOrganizationData.Organization[]): any {
    const treeData = new Array();
    if (data) {
      data.forEach((val) => {
        treeData.push({
          title: val.name,
          key: val.id,
          item: val,
          children: readyTreeData(val.children as AdminOrganizationData.Organization[]),
          icon:
            val.isFolder === 0 ? (
              <TagOutlined />
            ) : (
              <FolderOutlined />
            ),
        });
      });
    }
    return treeData;
  }

  /**
   * 加载权限详情
   * @param key
   */
  const loadOrganizationData = async () => {
    try {
      const response = await overallOrganizationTree();
      if (response.code === 0) {
        setDataTreeState(readyTreeData(response.data));
      }
    } catch (error) { }
  };

  /**
   * 恢复默认
   */
  useEffect(() => {
    loadOrganizationData();
  }, []);





  return (
    <ProCard title={selectOrganizationName ? selectOrganizationName : "综合面板"} headerBordered bordered={false} colSpan={{ xs: 24, sm: 5, md: 5, lg: 5, xl: 5 }}
      headStyle={{
        height: "65px"
      }}
    >
      {dataTree && dataTree.length ? (
        <Tree
          // height={550}
          style={{ marginLeft: 50 }}
          showLine={{ showLeafIcon: false }}
          showIcon={true}
          treeData={dataTree}
          onSelect={(selectedKeys: React.Key[], info: any) => {
            if (selectedKeys.length == 0) {
              onSelectOrganization({
                id: '',
                name: ''
              })
            } else {
              setSelectOrganizationNameState(info.node.title)
              onSelectOrganization({
                id: String(selectedKeys[0]),
                name: info.node.title
              })
            }
          }}
        />
      ) : (
        <Empty />
      )}
    </ProCard>
  );
};

export default OrganizationCard;
